
<template>
    <div class="container_query">
        <a-form layout="inline" :model="query" @submit="handleQuery">
            <a-form-item name="statusDictId" label="用户状态">
                <a-select
                    v-model:value="query.statusDictId"
                    placeholder="请选择用户状态"
                    allow-clear
                    style="width: 192px;"
                    :options="dictUserStatus"
                />
            </a-form-item>
            <a-form-item name="nickName" label="昵称">
                <a-input v-model:value="query.nickName" placeholder="请输入昵称" allow-clear />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleQuery">
                    <Icon icon="SearchOutlined" />查询
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Bus } from '@/plugin';
import { DictUtil } from '@/util';
// Component
import Icon from '@/component/common/Icon.vue';
// Model
import { Dict, DictType } from '@/model/common';
import { UserQuery } from '@/model/user';

// 变量
const query = ref(new UserQuery());
const dictUserStatus = ref<Dict[]>([]);

// 方法
onMounted(() => {
    init();
})

const init = () => {
    loadDict();
}

const loadDict = () => {
    DictUtil.get(DictType.USER_STATUS).then(res => dictUserStatus.value = res);
}

const handleQuery = () => {
    Bus.emit('refresh_user', query.value);
}
</script>

<style lang="less" scoped>
</style>
